// Hardcoded values for Slate variables in src/styles/settings/variables.scss

/*================ Color Variables ================*/
$color-primary: blue;

// Text colors
$color-body-text: #4E5665;

// Backgrounds
$color-body: #fff;

// Border colors
$color-border: #f6f6f6;

// Helper colors for form error states
$color-disabled: #000;
$color-disabled-border: #000;
$color-error: #000;
$color-error-bg: #000;
$color-success: #000;
$color-success-bg: #000;

/*================ Typography Variables ================*/
$font-weight-normal: 400;
$font-weight-bold: 700;

$font-stack-header: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-weight-header: $font-weight-bold;

$font-stack-body: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-base: 16px; // Henseforth known as 1em

/*============================================================================
  Grid Breakpoints and Class Names
    - Do not change the variable names
==============================================================================*/
$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 30px;

$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';

// The `$breakpoints` list is used to build our media queries.
// You can use these in the media-query mixin.
$breakpoints: (
  $small '(max-width: #{$grid-medium - 1})',
  $medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
  $medium-down '(max-width: #{$grid-large - 1})',
  $medium-up '(min-width: #{$grid-medium})',
  $large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
  $large-down '(max-width: #{$grid-widescreen - 1})',
  $large-up '(min-width: #{$grid-large})',
  $widescreen '(min-width: #{$grid-widescreen})'
);

/*============================================================================
  Generate breakpoint-specific column widths and push classes
    - Default column widths: $breakpoint-has-widths: ($small, $medium-up);
    - Default is no push classes
    - Will not work if `theme/grid.scss` is removed
==============================================================================*/
$breakpoint-has-widths: ($small, $medium-up);
$breakpoint-has-push: ($medium-up);

/*================ Sizing Variables ================*/
$width-site: 1180px;
$gutter: 30px;

/*================ Z-Index ================*/
$z-index-dropdown: 2;
$z-index-skip-to-content: 10000; // really high to be safe of app markup
